<template>
  <div class="app-container flex flex-col">
    <GroupsHeader v-model="activeName" :groups="groupMap[groupsKey]" />

    <div class="flex-1 relative">
      <template v-if="activeName === 'group'">
        <RangeLine
          :key="key_01"
          :groups="groupMap[groupsKey]"
          :colors="fifthColor.toReversed()"
          :y-axis-split-line="yAxisSplitLine"
          :y-value-increment="0"
          :y-min="-0.1"
          :y-max="9.1"
        />
      </template>
      <template v-else-if="activeName === 'kill prev group accuracy'">
        <RangeLine
          :key="key_02"
          :show-line-type="2"
          :groups="groupMap[groupsKey]"
          :colors="fifthColor.toReversed()"
          :y-axis-split-line="yAxisSplitLine"
          :y-value-increment="0"
          :y-min="-0.1"
          :y-max="9.1"
        />
      </template>
      <template v-else-if="activeName === 'group bar line'">
        <GroupBarLine :key="key_03" :groups="groupMap[groupsKey]"></GroupBarLine>
      </template>
      <template v-else-if="activeName === 'number distribution'">
        <NumberDistribution
          :groups="groupMap[groupsKey]"
          :row-size="5"
        />
      </template>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { yAxisSplitLine } from './tools.js'

import DateLineViewMixin from '@/mixins/DateLineViewMixin.js'

import { fifthColor } from '@/utils/study.js'

export default {
  mixins: [DateLineViewMixin],
  data() {
    return {
      fifthColor,
      yAxisSplitLine,
      groupsKey: '',
    }
  },
  computed: {
    ...mapState('study', ['globalGroupMapBySize']),
    groupMap() {
      return this.globalGroupMapBySize['five']
    }
  },
  created() {
    this.groupsKey = this.$route.meta.groupsKey
  }
}
</script>
